<template>
    <div class="content-container" style="background:#fff; overflow:hidden">
        <div class="student-index-list">
            <el-row :gutter="40">
                 <el-col :lg="4" :md="6">
                    <div class="add" @click="add">+</div>
                </el-col>
                 <el-col :lg="4" :md="6" style="position:relative"  v-for='(item,index) in listcase' :key="index">
                    <router-link :to="{path:'/admin/productionCase',query: {id: item.businessCaseId,casename:item.businessCaseName}}">
                        <div class="lisitem">
                            <div class="list-img">
                                <img  :src="item.businessCaseIcon"/>
                                <p>{{item.businessCaseName}}</p>
                            </div>
                        </div>
                    </router-link>
                        <div class="btn-box">
                           <img src="" title="编辑" @click="editFn(item.businessCaseName,item.businessCaseIconId,item.businessCaseId)" />
                         </div>
                        <div class="wrong-box">
                           <img src="" @click="deleteFn(item.businessCaseId)" />
                        </div>
                  </el-col>

            </el-row>
        </div>
        <el-dialog  :title="dialogTitle" :visible.sync="dialogFormVisible" width="660px" @close="closeDialog">
            <el-form :model="form" label-width="130px" :rules="rules" ref="form">
              <el-form-item label="案例行业名称 :"  prop="title">
                 <el-input type="text"  v-model="form.title" placeholder="请输入案例行业名称" style="width: 50%;" ></el-input>
              </el-form-item>
                <div class="iconcase">案例行业图标 :</div>
                <carousel ref="origin" :superurl="superurl" :isActive="form.isActive" v-model="form.isActive" @chooseVal='chooseVal'></carousel>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="saveForm('form')">保存</el-button>
                <el-button type="primary" @click="canselForm">取消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="案例热度排序" :visible.sync="dialogTableVisible"   border >
            <el-table :data="tableData6" @sort-change='sortChange' ref="mm" >
                    <el-table-column  type="index" label="序号" width="100">
                         <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column  label="案例名称" prop='caseTitle'>
                    </el-table-column>
                     <el-table-column  label="行业" prop='businessCaseName'>
                    </el-table-column>
                    <el-table-column prop="studentStar" sortable='custom' label="学生点赞数">
                    </el-table-column>
                    <el-table-column prop="teacherStar" sortable='custom' label="老师点赞数">
                    </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"

                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
            </el-pagination>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="sureFn()">确认</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import carousel from '@/components/carousel'
    export default {
        components: {
           carousel
        },
        data() {
            return {
                sort:'',
                id:'',
                listData: [],
                dialogFormVisible:false,
                dialogTableVisible:false,
                dialogForm: false,
                dialogTitle:'',
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                form:{
                    title:'',
                    isActive:'',
                },
                aflag:'',
                listcase:[],
                superurl: [
                    //  {
                    //     picUrl: '../../static/slider/1.jpg',
                    //     flag:false,
                    //     id:0,
                    // },
                ],
                tableData6: [],
                rules: {
                    title: [
                        { required: true, message: '请输入案例名称', trigger: 'blur' },
                    ]
                },
            }
        },
        created () {
            this.init()
        },
        methods: {
            page(){
                let self = this
                self.$http.get('/dataplatform/business/case/starRankList?pageNum='+self.currentPage+'&pagesize='+self.pagesize+'&orderStatus='+self.sort).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                      this.tableData6=res.data.list
                      self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            init(){
                let self = this
                // self.$http.get('/dataplatform/business/case/businesscaseList').then((response) => {
                //     let res = response.data
                //     if(res.code == '200') {
                        self.listcase=[{"businessCaseId":6,"businessCaseName":"军事行业","businessCaseIconId":60,"businessCaseIcon":"http://192.168.1.229:50000/resources/caseFile/交通和物流.png","businessCaseTitle":null,"businessCaseIntro":null,"businessCaseContent":null,"productorId":null,"delMark":0},{"businessCaseId":5,"businessCaseName":"李辛","businessCaseIconId":58,"businessCaseIcon":"http://192.168.1.229:50000/resources/caseFile/公共事业.png","businessCaseTitle":null,"businessCaseIntro":null,"businessCaseContent":null,"productorId":null,"delMark":0},{"businessCaseId":4,"businessCaseName":"公事行业","businessCaseIconId":58,"businessCaseIcon":"http://192.168.1.229:50000/resources/caseFile/公共事业.png","businessCaseTitle":null,"businessCaseIntro":null,"businessCaseContent":null,"productorId":null,"delMark":0},{"businessCaseId":3,"businessCaseName":"测试","businessCaseIconId":59,"businessCaseIcon":"http://192.168.1.229:50000/resources/caseFile/国防军工业.png","businessCaseTitle":null,"businessCaseIntro":null,"businessCaseContent":null,"productorId":null,"delMark":0}]

                //     }else if(res.code == '401'){
                //         self.$router.replace({
                //             path:'/login'
                //         })
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // })
            },
            //图片展示
            picshow(){
                let self = this
                // self.$http.get('/dataplatform/common/systemConfig/list?searchConfigs=caseIcon').then((response) => {
                //     let res = response.data
                //     if(res.code == '200') {
                      this.superurl=[{"id":58,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/公共事业.png"},{"id":59,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/国防军工业.png"},{"id":60,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/交通和物流.png"},{"id":61,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/教育培训行业.png"},{"id":62,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/节能环保.png"},{"id":63,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/金融业.png"},{"id":64,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/能源产业.png"},{"id":65,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/农、林、牧、渔业.png"},{"id":66,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/文化传媒.png"},{"id":67,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/医疗行业.png"},{"id":68,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/制造业.png"}]
                //     }else if(res.code == '401'){
                //         self.$router.replace({
                //             path:'/login'
                //         })
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // })
            },

            showDiag(){
                let self = this;
                this.$nextTick(function(){
                    self.$refs.origin.calleft=0

                 })
            },
            //关闭弹窗
             closeDialog(){
                 this.$refs.form.resetFields()
             },
            //编辑
            editFn(name,id,csaeid) {
               let self = this
               this.aflag=1
               this.dialogTitle='编辑案例行业名称'
               this.dialogFormVisible = true
               this.form.title = name
               this.form.isActive = id
               this.kid=csaeid
               self.showDiag()
                // self.$http.get('/dataplatform/common/systemConfig/list?searchConfigs=caseIcon').then((response) => {
                //     let res = response.data
                //     if(res.code == '200') {
                      self.superurl=[{"id":58,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/公共事业.png"},{"id":59,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/国防军工业.png"},{"id":60,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/交通和物流.png"},{"id":61,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/教育培训行业.png"},{"id":62,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/节能环保.png"},{"id":63,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/金融业.png"},{"id":64,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/能源产业.png"},{"id":65,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/农、林、牧、渔业.png"},{"id":66,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/文化传媒.png"},{"id":67,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/医疗行业.png"},{"id":68,"keyWord":"caseIcon","keyValue":"http://192.168.1.229:50000/resources/caseFile/制造业.png"}]
                      // console.log(self.form.isActive)
                      //console.log(self.superurl)
                        for (var i = 0; i < self.superurl.length; i++) {
                           if (self.superurl[i].id === id) {
                                self.superurl.unshift(self.superurl[i]);
                                self.superurl.splice(i+1, 1);
                                self.id=self.superurl[i].id
                                 break
                           }
                        }
                    // }else if(res.code == '401'){
                    //     self.$router.replace({
                    //         path:'/login'
                    //     })
                    // }else{
                    //     self.$message.error(res.message)
                    // }
                // })
            },
            //取消
            canselForm(){
               this.dialogFormVisible = false
               this.superurl=[]
               this.$refs.form.resetFields()
            },
            //删除
           deleteFn(id){
              let self = this;
              self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.get('/dataplatform/business/case/delBusinessCaseById?businessCaseId='+id+'',
                    ).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
			 });
           },
           //排序
            sortChange(column, prop, order){
               // console.log(column.order)
               // console.log(column.prop)
               //let sort=''
               let self = this
                if(column.order=='ascending' && column.prop=='teacherStar'){
                   self.sort=1
                }else if(column.order=='descending' && column.prop=='teacherStar'){
                   self.sort=2
                }else if(column.order=='ascending' && column.prop=='studentStar'){
                    self.sort=3
                }else if(column.order=='descending' && column.prop=='studentStar'){
                   self.sort=4
                }
               //console.log(sort)
                self.$http.get('/dataplatform/business/case/starRankList?pageNum='+self.currentPage+'&pagesize='+self.pagesize+'&orderStatus='+self.sort).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData6= res.data.list

                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.page()

            },
           //热度按钮
            sortFn(){
                this.dialogTableVisible=true
                this.currentPage = 1
                this.sort=''
                this.page()
                this.$nextTick(() => {
                    this.$refs.mm.clearSort()
                })


            },
            //关闭弹窗
            sureFn(){
                 this.dialogTableVisible=false


            },
           //添加
           add(){
             this.picshow()
             this.aflag=2
             this.dialogFormVisible = true
             this.dialogTitle='添加案例行业名称'
             this.form.title='',
             this.form.isActive=''
             this.showDiag()

           },
           //改变子组件
            chooseVal(id,current){
             let self=this
             this.form.isActive =id
              //this.isActive=index;
            //  for(var i=0; i<self.superurl.length;i++){
            //     self.superurl[i].flag=false
            //      if( item.flag=='true'){
            //         item.flag=false
            //     }else{
            //         item.flag=true
            //     }
            // }
            // self.num=item.id
             //console.log(self.num)
            },

            //保存
            saveForm(form){
                let self = this
                if(self.aflag==1){  //编辑
                  self.$refs[form].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/business/case/saveBusinessCase',{
                            businessCaseId:self.kid,
                            businessCaseName:self.form.title,
                            businessCaseIconId:self.form.isActive
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                            self.dialogFormVisible=false
                            self.init()
                            self.$refs[form].resetFields();
                            }else if(res.code == '401'){
                                this.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
                }else if(self.aflag==2){   //添加

                    if(self.form.isActive==''){
                    self.$message({
                        message: '请选择行业图片',
                        type: 'warning'
                    })
                    return
                    }
                self.$refs[form].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/business/case/addBusinessCase',{
                            businessCaseName:self.form.title,
                            businessCaseIconId:self.form.isActive
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                            self.dialogFormVisible=false
                            self.init()
                            self.$refs[form].resetFields();
                            }else if(res.code == '401'){
                                this.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                })
                }

            }
        }
    }
</script>

<style scoped>
   .content-container>>>.el-dialog__body{
       padding: 0px 20px;
    }
    .iconcase{
        margin-left: 28px;
    }
    .butt {
        float: right;
        margin-top: 30px;
        margin-right: 60px;
    }
    .student-index-list {
        margin: 60px 80px;
    }
    .lisitem {
        height: 160px;
        background: #3d5b81;
        border-radius: 6px;
        position: relative;
        -webkit-transition: .3s transform;
        transition: .3s transform;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        margin-bottom: 40px;
        z-index: 10;
        cursor: pointer;
    }
    .add {
        height: 160px;
        border-radius: 6px;
        background: #fff;
        border: 1px dashed #3d5b81;
        text-align: center;
        line-height: 160px;
        font-size: 35px;
        color: #3d5b81;
        cursor: pointer;
    }
    .list-img {
        text-align: center;
        padding-top: 35px;
    }
    .list-img>img{
        width: 60px;
        max-height: 85px;
    }
    .list-img>p {
        color: #fff;
        font-size: 16px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .btn-box {
        position: absolute;
        right: 30px;
        bottom: 50px;
        color: #fff;
        width: 20px;
        height: 20px;
        z-index: 99;
        cursor: pointer;
    }
    .wrong-box {
        position: absolute;
        right: 12px;
        top: 12px;
        color: #fff;
        z-index: 99;
        cursor: pointer;
        width: 30px;
        height: 30px;
    }

</style>
